<template>
  <div class="navbar">
    <nav class="navbar navbar-expand-lg bg-body-tertiary bg-dark" data-bs-theme="dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">商品推荐系统</a>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="/index">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">推荐</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">社区</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                数据可视化
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">列表1</a></li>
                <li><a class="dropdown-item" href="#">列表2</a></li>
                <li><a class="dropdown-item" href="#">列表3</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="right-section">
      <div class="user-icon">
        <a href="#">
          <img src="../../../assets/images/ggb.png" class="user-icon-logo" />
        </a>
        <!-- 下拉菜单 -->
        <ul class="dropdown-menu-right">
          <li>
            <router-link to="/login" class="dropdown-item" v-show="loginBt">登录</router-link>
            <router-link to="/adminPage" class="dropdown-item" v-show="is_admin">管理员</router-link> <!-- 动态显示管理员标签 -->
          </li>
          <li class="logout-item" @click="showContactModal">联系我们</li>
          <li class="logout-item" v-show="is_login" @click="logout">退出登录</li>
        </ul>
      </div>
    </div>

    <!-- 模态框背景遮罩层 -->
    <div v-if="showModal" class="modal-overlay" @click="closeModal"></div>

    <!-- 模态框内容 -->
    <div v-if="showModal" class="modal" tabindex="-1" style="display: block;">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">联系我们</h5>
            <button type="button" class="btn-close" @click="closeModal"></button>
          </div>
          <div class="modal-body">
            <!-- 图片展示 -->
            <img src="../../../assets/images/qun.png" alt="联系我们" class="contact-image" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/utils/bus";
export default {
  name: "RotatingPositionComponent",
  data() {
    return {
      is_admin: false,  // 管理员标识
      is_login: false,  // 登录标识
      loginBt: true,    // 控制登录按钮显示
      showModal: false, // 控制模态框的显示
    };
  },
  created() {
    // 从localStorage中获取管理员状态和用户信息
    const adminStatus = localStorage.getItem("isAdmin");
    if (localStorage.getItem("userInfo") !== null) {
      this.is_login = true;
      this.loginBt = false;
    }

    if (adminStatus === "true") {
      this.is_admin = true;
      bus.emit("is_admin", true);
    } else {
      this.is_admin = false;
      bus.emit("is_admin", false);
    }
  },
  methods: {
    logout() {
      localStorage.clear();    // 清空localStorage，移除用户登录和管理员状态
      this.is_login = false;   // 更新状态，隐藏“退出登录”按钮
      this.is_admin = false;   // 更新状态，隐藏“管理员”标签
      this.loginBt = true;     // 显示“登录”按钮
      bus.emit("is_admin", false); // 广播管理员状态更新
      this.$router.push("/index"); // 退出后跳转到首页
    },
    showContactModal() {
      this.showModal = true; // 显示模态框
    },
    closeModal() {
      this.showModal = false; // 隐藏模态框
    }
  }
};
</script>

<style scoped>
.navbar {
  position: absolute;
  align-items: center;
  width: 100%;
  height: 60px;
}

.right-section {
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
}

.user-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.user-icon-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.dropdown-menu-right {
  position: absolute;
  top: 50px;
  right: -5px;
  display: none;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 0;
  list-style: none;
  width: 120px;
}

.user-icon:hover .dropdown-menu-right {
  display: block;
}

.dropdown-item {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: black;
  cursor: pointer;
  text-align: center;
}

.dropdown-item:hover {
  background-color: #f0f0f0;
  border-radius: 90%;
}

.logout-item {
  padding: 10px;
  cursor: pointer;
  text-align: center;
}

.logout-item:hover {
  background-color: #f0f0f0;
}

/* 模态框背景遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
  z-index: 1040;
}

/* 模态框 */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1em;
  width: 40%; /* Resize the modal */
  max-width: 340px; /* Max width */
  height: 500px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 1em;
  text-align: center;
}

.contact-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
</style>
